<template>
    <section id="Contact">
        Contact
    </section>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
    setup() {
        return {};
    }
});
</script>

<style scoped lang="scss">
#Contact {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

@media (max-width: 1024px) {
    #Home {
        .home-main {
            top: 26%;
            left: 15%;
            .home-image {
                img {
                    width: 5rem;
                    height: 5rem;
                }
            }
            .home-content {
                h2 {
                    font-size: 1.1rem;
                }
            }
        }
    }
}
@media screen and (min-width: 1024px) and (max-width: 1680px) {
    #Home {
        .home-main {
            top: 32%;
            left: 15%;
            display: flex;
            .home-image {
                margin-right: 3rem;
            }
            .home-content {
                margin-top: 1.5rem;
            }
            .home-btn {
                padding: 0.8rem 1.5rem 1rem;
            }
        }
    }
}
@media (min-width: 1680px) {
    #Home {
        .home-main {
            top: 35%;
            left: 25%;
            display: flex;
            .home-image {
                margin-right: 3rem;
            }
            .home-content {
                margin-top: 1.5rem;
            }
            .home-btn {
                padding: 0.8rem 1.5rem 1rem;
            }
        }
    }
}
</style>
